<template>
  <div class="main-layout-container">
    <div class="main-layout">
      <div class="main-layout-head">
        <div>
          <slot name="title"></slot>
        </div>
        <div class="main-layout-head-operation">
          <slot name="operation"></slot>
        </div>
      </div>
      <div class="main-layout-content">
        <div class="main-layout-content-head">
          <div>
            <slot name="search"></slot>
          </div>
          <div class="main-layout-content-head-menu">
            <slot name="menu"></slot>
          </div>
        </div>
      </div>
    </div>
    <div class="main-layout-sub">
      <router-view
        :searchWord="props.searchWord"
        :flag="props.flag"
      ></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  searchWord: String,
  flag: Boolean,
});
</script>

<style scoped>
.main-layout-container {
  width: calc(100vw - 76px);
  height: calc(100vh - 48px - 50px);
}
.main-layout {
  height: 15%;
}
.main-layout-head {
  height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
}
.main-layout-head-operation {
  flex: 1;
  text-align: right;
}
.main-layout-content {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}
.main-layout-content-head {
  display: flex;
}
.main-layout-content-head-menu {
  padding-left: 16px;
}
.main-layout-sub {
  width: 100%;
  height: 85%;
  background-color: #fff;
  border-radius: 4px;
  --el-box-shadow-lighter: 0 2px 4px 0 rgba(0, 0, 0, 1);
  overflow: auto;
}
</style>
